<extend name="Base/common" />

<block name="style">
    <load  href ="__CSS__/cart/front-old.css"/>
</block>

<block name="body">
    <div class="topbar">
    </div>
    <div id="header">
        <div class="header-container fn-clear">
            <div class="header-title">
                <div class="alipay-logo"></div>
                <span class="logo-title">我的收银台</span>
                <a style="text-decoration:none;padding-top:23px;float:left"  href="{:U('personCenter/personCenter')}">去个人中心</a>
            </div>
        </div>
    </div>
    <div id="container">
        <span style="display:inline;width:1px;height:1px;overflow:hidden"></span>
        <div id="content" class="fn-clear">
            <div id="J_order" class="order-area" data-module="excashier/login/2015.08.01/orderDetail">
                <div id="order" data-role="order" class="order order-bow">
                    <div class="orderDetail-base" data-role="J_orderDetailBase">
                        <div class="commodity-message-row">
                            <span class="first long-content">8010322499</span>
                            <span class="second short-content">收款方：阿迪达斯体育（中国）..</span>
                        </div>
                        <span class="payAmount-area" id="J_basePriceArea"><strong class=" amount-font-22 ">{$sole}</strong> 元
                        </span>
                    </div>
                    <a id="J_OrderExtTrigger" class="order-ext-trigger fn-hide" href="" seed="order-detail-more" data-role="J_oderDetailShrink">
                        订单详情</a>
                </div>
            </div>

            <div class="cashier-center-container">
                 <div id="J_loginPwdMemberTModule" class="cashiser-switch-wrapper fn-clear">
                    <div class="cashier-center-view view-qrcode fn-left" id="J_view_qr">
                        <div data-role="qrPayArea" class="qrcode-integration qrcode-area" id="J_qrPayArea">
                            <div class="qrcode-header">
                                <div class="ft-center">扫一扫付款（元）</div>
                                <div class="ft-center qrcode-header-money">{$sole}</div>
                            </div>

                            <div class="qrcode-img-wrapper" data-role="qrPayImgWrapper">
                                <div data-role="qrPayImg" class="qrcode-img-area">
                                    <div class="ui-loading qrcode-loading" data-role="qrPayImgLoading" style="display: none;"></div>
                                    <input type="hidden"  id="mytxt" value="{$sole}">
                                    <div style="position: relative;display: inline-block;cursor:pointer" id="picture"><canvas width="168" height="168" style="float: left;"></canvas>
                                        <div id="code" style="position: absolute;top: 50%;left: 50%;width:175px;height:172px;margin-left: -87px;margin-top: -88px;text-align:center;"><span style="margin:80px 0 0 40px;display:block;height:40px;width:100px;line-height:40px;color:red;">亲!点我付款哦!</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="qrcode-img-explain fn-clear">
                                    <img class="fn-left" src="__IMG__/cart/T1bdtfXfdiXXXXXXXX.png">
                                    <div class="fn-left">打开手机支付宝<br>扫一扫继续付款</div>
                                </div>
                            </div>
                            <div class="qrcode-foot" data-role="qrPayFoot" style="display: block;">
                                <div data-role="qrPayExplain" class="qrcode-explain fn-hide" style="display: block;">
                                    <a href="" class="qrcode-downloadApp" data-boxurl="" data-role="dl-app" target="_blank" >首次使用请下载手机支付宝</a>
                                </div>
                            </div>
                            <div class="">
                                <a href="{:U('personCenter/personCenter')}"  class="switch-tip-btn"  style="cursor:pointer;font: 14px/1.5 Arial, sans-serif;text-align: center;border:none;margin:0  0 60px 50px;width:200px;height:40px;padding:10px 0 0 0 ;line-height:30px;">付款成功！去个人中心</a>
                            </div>
                        </div>
                        <div class="qrguide-area" id="J_qrguideArea" >
                            <img src="__IMG__/cart/T13CpgXf8mXXXXXXXX.png" class="qrguide-area-img background"  >
                            <img src="__IMG__/cart/T1ASFgXdtnXXXXXXXX.png" class="qrguide-area-img active" style="display: block;">
                        </div>
                    </div>
                    <div class="view-switch qrcode-show fn-left" id="J_viewSwitcher" unselectable="on" onselectstart="return false;" >
                        <div class="switch-tip switch-qrcode-tip " id="J_tip_qr">
                            <div class="switch-tip-font">&nbsp;</div>
                            <div class="switch-tip-icon-wrapper">
                                <i class="switch-tip-icon iconfont">&#61486;</i>
                                <img class="switch-tip-icon-img" src="__IMG__/cart/T1HHFgXXVeXXXXXXXX.png" width="50" height="17" >
                            </div>
                            <a class="switch-tip-btn" href="#">&lt;&nbsp;登录账号付款</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="footer">
            <style>
            .copyright,.copyright a,.copyright a:hover{color:#808080;}
            </style>
            <div class="copyright">
              支付宝版权所有 <a href="#" target="_blank"  >ICP证:你懂的支付鸨</a>
            </div>
        </div>
    </div>
    <div id="partner"><img  src="__IMG__/cart/2R3cKfrKqS.png" >
    </div>

    <load  href="__JS__/cart/jquery.min.js" />
    <load  href="__JS__/cart/jquery.qrcode.min.js" />
<script type="text/javascript">

$(function(){
	$("#picture").click(function(){
		$("#code").empty();
		var str = toUtf8($("#mytxt").val());

		$("#code").qrcode({
			render: "table",
			width: 173,
			height:170,
			text: str
		});
	});
})
function toUtf8(str) {
    var out, i, len, c;
    out = "";
    len = str.length;
    for(i = 0; i < len; i++) {
    	c = str.charCodeAt(i);
    	if ((c >= 0x0001) && (c <= 0x007F)) {
        	out += str.charAt(i);
    	} else if (c > 0x07FF) {
        	out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
        	out += String.fromCharCode(0x80 | ((c >>  6) & 0x3F));
        	out += String.fromCharCode(0x80 | ((c >>  0) & 0x3F));
    	} else {
        	out += String.fromCharCode(0xC0 | ((c >>  6) & 0x1F));
        	out += String.fromCharCode(0x80 | ((c >>  0) & 0x3F));
    	}
    }
    return out;
}
</script>
</block>
